<template>
    <div class="chart" :style="`width:${props.width};height:${props.height};--main-color:${props.color};`">
        <div class="svg1">
            <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
                <defs>
                    <linearGradient id="Gradient1" x1="0" x2="0" y1="0" y2="1">
                        <stop offset="0%" stop-color="#0000" />
                        <stop offset="60%" :stop-color="props.color" />
                        <stop offset="100%" :stop-color="props.color" />

                    </linearGradient>
                </defs>
                <circle :cx="`calc(100% / 2)`" :cy="`calc(100% / 2)`" :r="`calc((100% - 33px) / 2)`" stroke="url(#Gradient1)" fill="transparent" stroke-width="2"> </circle>
                <circle :cx="`calc(100% / 2)`" :cy="`calc(100% / 2)`" :r="`calc((100% - 60px) / 2)`" stroke="url(#Gradient1)" fill="transparent" stroke-width="2" />
                <circle :cx="`calc(100% / 2)`" :cy="`calc(100% / 2)`" :r="`calc((100% - 90px) / 2)`" stroke="url(#Gradient1)" fill="transparent" stroke-width="2" />
                <!-- <ellipse :cx="`calc(100% / 2)`" :cy="`calc((100% - 20px) / 2)`" :rx="`calc(100% / 2 - 5px)`" :ry="`calc((100% - 20px) / 2 - 1px)`" stroke="url(#Gradient1)" fill="transparent" stroke-width="2" />
                <ellipse :cx="`calc(100% / 2)`" :cy="`calc((100% - 20px) / 2 - 2px)`" :rx="`calc(100% / 2 - 15px)`" :ry="`calc((100% - 20px) / 2 - 6px)`" stroke="url(#Gradient1)" fill="transparent" stroke-width="2" />
                <ellipse :cx="`calc(100% / 2)`" :cy="`calc((100% - 20px) / 2 - 7px)`" :rx="`calc(100% / 2 - 50px)`" :ry="`calc((100% - 20px) / 2 - 15px)`" stroke="url(#Gradient1)" fill="transparent" stroke-width="2" />  -->
            </svg>
        </div>

        <div class="progerssscircle">
            <div v-for="item in 36" :id="`pro_${item}`" :key="item" :class="{'rect':true,'unactive':item>_value}"></div>
        </div>
        <div class="title">{{props.title}}</div>
        <div class="label">{{props.value}}</div>
    </div>
</template>

<script setup> 

const props = defineProps({
    /**宽度 */
    width: {
        type: [String],
        default: '100%'
    },
    /**高度 */
    height: {
        type: [String],
        default: '100%'
    },
    /**颜色 */
    color: {
        type: [String],
        default: '#66E1DF'
    },
    /**标题 */
    title: {
        type: [String],
        default: '标题'
    },
    /**文本 */
    value: {
        type: [String],
        default: '70%'
    },
})
let _value = computed(() => {
    let num = ''
    const numbers = props.value.match(/\d+/g);
    if (numbers) {
        if (numbers.length > 0) {

            num = numbers[0]
        }
        else
            num = '0'
    }
    else
        num = '0'
    loopinterv = null
    nextTick(() => {
        loopinterv = null
        setFG()
    })

    return Math.ceil(num / 100 * 36)

})
let loopinterv = null
let loopintervCT = 1
let setFG = () => {

    if (loopinterv == null && _value.value > 0) {

        loopinterv = setInterval(() => {
            if (loopintervCT > 36)
                loopintervCT = 1
            let el = document.getElementById(`pro_${loopintervCT}`)
            if (!el.classList.contains('unactive')) {

                if (!el.classList.contains('fg'))
                    el.classList.add('fg')
            }
            if (loopintervCT == 1)
                document.getElementById(`pro_36`).classList.remove('fg')
            else
                document.getElementById(`pro_${loopintervCT - 1}`).classList.remove('fg')

            loopintervCT++
            //requestAnimationFrame(setFG)
        }, 50)
    }
}
onMounted(() => {
    nextTick(() => {
        setFG()
    })

})
onUnmounted(() => {
    if (loopinterv != null)
        clearInterval(loopinterv)
})
</script>
<style lang='scss' scope>
$progressheight: calc(50% - 15px);
.fg {
    box-shadow: 0px 0px 6px 2px #fff !important;
}

.unactive {
    opacity: 0.2;
}
.chart {
    position: relative;
    display: flex;
    justify-content: center;
    .label {
        font-weight: 600;
        font-size: 18px;
        z-index: 4;
        top: calc(100% / 2);
        transform: translateY(-130%);
        position: absolute;
        height: 18px;
        line-height: 18px;
        width: 100%;
        text-align: center;
    }
    .svg1 {
        z-index: 1;
        position: absolute;

        width: 100%;
        height: calc(100%);
        transform: rotateX(55deg) translateY(-20px) scale(1.1);
    }
    .circlev {
        position: absolute;

        //transform: rotateX(50deg) translate(0px, 40px);
        border: 2px solid var(--main-color);
        border-radius: 50%;
        &:nth-child(1) {
            transform: rotateX(50deg) translate(0px, 20px);
            // animation: 3s updv1 linear infinite;
            // animation-delay: 1s;
            // @keyframes updv1 {
            //     0% {
            //         transform: rotateX(50deg) translate(0px, 70px);
            //     }
            //     100% {
            //         transform: rotateX(50deg) translate(0px, 10px) scale(1.2);
            //     }
            // }
        }
        &:nth-child(2) {
            transform: rotateX(50deg) translate(0px, 45px);
            // animation: 3s updv1 linear infinite;
            // animation-delay: 2s;
            // @keyframes updv1 {
            //     0% {
            //         transform: rotateX(50deg) translate(0px, 70px);
            //     }
            //     100% {
            //         transform: rotateX(50deg) translate(0px, 10px) scale(1.2);
            //     }
            // }
        }
        &:nth-child(3) {
            transform: rotateX(50deg) translate(0px, 80px);
            // animation: 3s updv1 linear infinite;
            // @keyframes updv1 {
            //     0% {
            //         transform: rotateX(50deg) translate(0px, 70px);
            //     }
            //     100% {
            //         transform: rotateX(50deg) translate(0px, 10px) scale(1.2);
            //     }
            // }
        }
    }
    .progerssscircle {
        position: absolute;
        z-index: 2;
        width: calc(100% - 45px);
        height: calc(100% + 15px);
        transform: rotateX(55deg) translate(-3px, -40px);
        transition: transform 0.2 ease;
        border-radius: 50%;
        //border: 1px solid red;
        & > .rect {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-5px, -5px);
            width: 6px;
            height: 6px;
            background-color: var(--main-color);
        }
        @for $i from 1 through 36 {
            .rect:nth-child(#{$i}) {
                transform: rotate(10deg * $i) translateY(-45px);
            }
        }
    }
    .title {
        bottom: 2px;
        position: absolute;
        height: 18px;
        line-height: 18px;
        width: 100%;
        text-align: center;
    }
}
@media screen and (min-height: 1000px) {
    .progerssscircle {
        height: calc(100% + 5px) !important;
    }
    .svg1 {
        transform: rotateX(55deg) translateY(-24px) scale(1.2) !important;
    }
}
@media screen and (min-height: 1000px) and (min-width: 1700px) {
    .progerssscircle {
        height: calc(100% + 5px) !important;
        transform: rotateX(55deg) translate(-3px, -30px) !important;
    }
    .svg1 {
        transform: rotateX(55deg) translateY(-24px) scale(0.9) !important;
    }
    .label {
        top: 32% !important;
    }
}

// @media screen and (max-width: 1380px) {
//     .progerssscircle {
//         transform: rotateX(68deg) translate(-3px, -22px) scale(0.6) !important;
//     }
// }
</style>